<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    <script type="text/javascript" src="/assets/js/isaiah.js"></script>

    <title>Manage your Docker fleet with ease - Isaiah</title>
  </head>
  <body>
    <div class="app-wrapper">
      <!-- SCREEN -- LOADING -->
      <div class="screen for-loading is-active">
        <div class="loader">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
          </svg>
        </div>
        <p>Establishing connection with the remote server</p>
      </div>

      <!-- SCREEN -- DASHBOARD -->
      <div class="screen for-dashboard">
        <div class="main">
          <!-- OVERVIEW TABS (CONTAINERS, IMAGES, ETC.) -->
          <div class="left"></div>

          <!-- MAIN TAB (INSPECTOR) -->
          <div class="right"></div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
          <!-- HELPER -->
          <div class="left">
            <p class="help for-default">
              ← → ↑ ↓: navigate,
              <button data-action="menu">x: menu</button>,
              <button data-action="bulk">b: view bulk commands</button>,
              <button data-action="quit">q: quit</button>,
              <button data-action="help">?: help</button>,
              <button data-action="search">/: search</button>
            </p>
            <p class="help for-menu">
              enter: execute, esc: close, ↑ ↓: navigate
            </p>
            <p class="help for-prompt">
              n/esc: no, y/enter: yes
            </p>
            <p class="help for-prompt-input">
              esc: cancel, enter: submit
            </p>
            <p class="help for-message">
              n/esc/y/enter: ok
            </p>
            <p class="help for-picker">
              ↑ ↓: navigate, enter: pick, esc: close
            </p>
            <p class="help for-overview">
              ↑ ↓: navigate, enter: pick, esc: close
            </p>
            <p class="help for-jump">
              ↑ ↓: navigate, enter: jump, esc: close
            </p>
            <p class="help for-parameters">
              ↑ ↓: navigate, enter: toggle, esc: close
            </p>
            <div class="search-control" data-action="focusSearch">
              <span data-action="focusSearch">filter:</span>
              <input type="text" id="search-input" data-action="focusSearch"/>
            </div>

            <div class="mobile-controls">
              <button class="has-icon" data-action="previousTab">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </button>
              <button class="has-icon" data-action="nextTab">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </button>
              <button class="has-icon" data-action="mobileMenu">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
              </button>
              <button class="has-icon" data-action="reject">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </button>
              <button class="has-icon" data-action="confirm">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
              </button>
              <button class="has-icon" data-action="ttyQuit">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>

          <!-- LOADING & CONNECTION INDICATOR -->
          <div class="right">
            <div class="indicator for-communication-target"></div>
            <div class="indicator for-loading" title="Loading">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
                />
              </svg>
            </div>
            <div
              class="indicator for-connected"
              title="Connection with server is enabled"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
                />
              </svg>
            </div>
            <div
              class="indicator for-disconnected"
              title="Connection with server was lost"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- POPUP LAYER -->
      <div class="popup-layer"></div>
    </div>
  </body>
</html>
